<template>
  <div>
      <transition name="fadeIn">
    <div id="animateBox" v-show="showImg">
      <div id="break"></div>
      <div id="InBox"></div>
    </div>
  </transition>
  </div>
</template>

<script>
import bgImg5 from "../../assets/img/1/y1.png";
import bgImg4 from "../../assets/img/1/y2.png";
import bgImg3 from "../../assets/img/1/y3.png";
import bgImg2 from "../../assets/img/1/y4.png";
import bgImg6 from "../../assets/img/1/y5.png";
export default {
  data() {
    return {
      timer: [],
      showImg: false,
    };
  },
  mounted() {
    let imageSrcArr = [bgImg2, bgImg3, bgImg4, bgImg5, bgImg6];
    // let imageSrcArr = [bgImg5,bgImg6]
    let imgloadPromiseArr = [];
    let imageArr = [];

    for (let i = 0; i < imageSrcArr.length; i++) {
      imgloadPromiseArr[i] = new Promise((resolve, reject) => {
        let img = new Image();
        img.src = imageSrcArr[i];
        img.onload = () => {
          resolve(img);
        };
      });
    }
    imgloadPromiseArr.forEach(item=>{
      item.then(res=>{
        imageArr.push(`url(${res.currentSrc})`)
        index = imageArr.length
      })
    })
    // Promise.all(imgloadPromiseArr).then((img) => {
      console.log(img);
      // let imageArr = img.map((item) => `url(${item.currentSrc})`);
      this.showImg = true;
      let repeat = true;
      function changeImage(InBox) {
        if (repeat) {
          breakBox.style.zIndex = -10;
          count++;
          count = count === index ? 0 : count;
          repeat = false;
          setTimeout(() => {
            repeat = true;
            breakBox.style.zIndex = 100;
            let currentImageLength = count === index - 1 ? 0 : count + 1;
            InBox.style.backgroundImage = imageArr[currentImageLength];
          }, 1000);
        }
      }
      let count = 0;
      let index = 0;
      let breakBox = document.querySelector("#break");
      let InBox = document.querySelector("#InBox");
      InBox.style.backgroundImage = imageArr[1];
      const appendDom = (dom) => {
        for (let i = 0; i < 100; i++) {
          let div = document.createElement("div");
          let div1 = document.createElement("div");
          div.style.width = "76px";
          div.style.height = "40px";
          div.style.boxSizing = "border-box";
          div.style.backgroundImage = imageArr[0];
          let positionX = -(i % 10) * 76 + "px";
          let positionY = -parseInt(i / 10) * 40 + "px";
          div.style.backgroundPosition = positionX + " " + positionY;
          div.style.backgroundSize = "760px 400px";
          let style = document.styleSheets[0];
          style.insertRule(`@keyframes secondrotate${i} 
        {
            0%,30%{
                transform:scale(1)
            }
            70%
            {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${
            180 + Math.random() * 720
          }deg)}
            100%
            {transform: rotateX(${180 + Math.random() * 720}deg) rotateY(${
            180 + Math.random() * 720
          }deg)}
        }`);
          style.insertRule(`@keyframes secondrotateS${i} 
        {
            0%,32%{
                transform:scale(1);opacity:1;
            }70%
            {transform: translateZ(${300 + Math.random() * 1500}px) translate(${
            (0.5 - Math.random()) * 500
          }px,${(0.5 - Math.random()) * 500}px);opacity:0}
            100%
            {transform: translateZ(${300 + Math.random() * 1500}px) translate(${
            (0.5 - Math.random()) * 500
          }px,${(0.5 - Math.random()) * 500}px);opacity:0}
        
        }`);
          div1.style.animation = `secondrotateS${i} 4.5s ease-out infinite`;
          div.style.animation = `secondrotate${i} 4.5s ease-out infinite`;
          div.style.transformOrigin = `center center`;
          div.addEventListener("animationstart", () => {
            setTimeout(() => {
              changeImage(InBox);
              div.style.backgroundImage = imageArr[count];
            }, 4000);
          });
          div.addEventListener("animationiteration", () => {
            setTimeout(() => {
              changeImage(InBox);
              div.style.backgroundImage = imageArr[count];
            }, 4000);
          });
          div1.appendChild(div);

          dom.appendChild(div1);
        }
      };
      appendDom(breakBox);
    // });
  },

  destroyed() {
    this.timer.forEach((item) => {
      clearInterval(item);
    });
  },
};
</script>

<style scoped lang="less">
@import url("../../css/comment/animate.css");
#animateBox {
  width: 100vw;
  height: calc(100vh - 50px);
  //  background-color: rgba(255, 255, 255, 0.6);
  #break {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 760px;
    height: 400px;
    display: flex;
    perspective: 1000px;
    transform-style: preserve-3d;
    flex-wrap: wrap;
    z-index: 100;
  }
  #InBox {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 760px;
    height: 400px;
    display: flex;
    perspective: 1000px;
    transform-style: preserve-3d;
    flex-wrap: wrap;
    z-index: 10;
    background-size: 760px 400px;
  }
}
</style>